<template>
  <div class="typeList">
    <ul>
      <li v-for="(item,index) in gameListArr" :key="index">
        <img :src="item.IconUrl" alt>
        <div class="txt">
          <div class="name">{{item.GameName}}</div>
          <div class="cname">
            <!-- <span style="color:#EF8F2C">{{item.nnt}}万人 在玩</span> -->
            <span style="color:#90D014">{{item.Ncsl}}MB</span>
          </div>
          <div class="hot">热门一个热门一个游戏，进来组队玩一把热门一个游戏，进来组队玩一把游戏，进来组队玩一把</div>
        </div>
        <div class="btn" @click="seeDetail(item)">打开</div>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {};
  },
  props: {
    gameListArr: ""
  },
  methods: {
    seeDetail(item) {
      let user = JSON.parse(localStorage.zyUserData);
      let url = item.DownLoadUrl;
      let gameId = user.GameID;
      let userid = user.UserID;
      let password = localStorage.zyPassword;
      let score = user.Gold;
      let NickName = user.NickName;
      let isMemberOrder = user.MemberOrder == "5" ? true : false;

      if (item.Sfhy == "1" && !isMemberOrder) {
        Toast({
          message: "付费游戏，仅对会员用户开放",
          duration: 3000
        });
        return;
      }
      window.open(
        `${url}?gameid=${gameId}&userid=${userid}&password=${password}&score=${score}&accounts=${
          this.phone
        }&nickname=${NickName}`,
        "_bank"
      );
    }
  }
};
</script>
<style lang="stylus" scoped>
.typeList {
  width: 7.1rem;
  height: 11rem;
  overflow: scroll;
  background: #fff;
  border-radius: 10px;

  ul {
    box-sizing: border-box;
    padding: 5px;

    li {
      display: flex;
      margin-bottom: 5px;

      img {
        width: 1.3rem;
        height: 1.3rem;
        display: block;
        flex: 0 1 1.3rem;
      }

      .txt {
        flex-grow: 1;
        margin: 0 5px;

        .name {
          font-size: 14px;
          margin: 8px 0;
        }

        .cname {
          font-size: 11px;
        }

        .hot {
          width: 3.8rem;
          font-size: 11px;
          color: #444;
          margin: 8px 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .btn {
        flex: 0 1 75px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background-color: #1089FF;
        margin-top: 0.5rem;
        border-radius: 11px;
        color: #E8E8E8;
      }
    }
  }
}
</style>
